
import { Row, Col, Form, Input, Button, Typography, Select, Modal, Table, Tag, Space, Avatar, Popconfirm, Tooltip } from "antd"
import { observer } from 'mobx-react';
import { useEffect, useRef, useState } from "react";
import moment from "_moment@2.29.1@moment";
import myinfo from "../../mobx/info";
import { annoTypeList } from '../../utils/commom';
import { UploadOutlined, DownloadOutlined, FormOutlined, DeleteOutlined, FolderViewOutlined } from '@ant-design/icons';
import { ajax } from "../../api";

const { Column, ColumnGroup } = Table;
const { Title } = Typography

function AnnoList({ history }: any) {
  const { annoList,userInfo, getAnnoListAsync, getAnnoList } = myinfo
  const keywordEle: any = useRef()
  const role = JSON.parse(JSON.stringify(userInfo)).role
  const [flag,setFlag]=useState(false)
  const [type, settype] = useState<any>(null)

  useEffect(() => {
    getAnnoListAsync({})
    if(role>3){
      setFlag(true)
    }
  }, [])

  const todoStartSearch = () => {
    const k = keywordEle.current.state.value
    getAnnoListAsync({
      type,
      keyword: k
    })
  }
  const changeType = (v: any) => {
    console.log(v);
    settype(v)
  }

  const confirm = async (item: any, index: any) => {
    let { code, result } = await ajax.deleteanno({ _id: item._id })
    if (code == 200) {
      annoList.splice(index, 1)
      getAnnoList([...annoList])
    }
  }
  const gotoAnnoDetail = (item: any) => {
    history.push('/main/anno/detail/?aid=' + item._id)

  }
  const gotoEditAnno = (item: any) => {
    history.push('/main/anno/edit' + item._id)

  }
  return (
    <div>
      <Title level={2}> 公告列表 </Title>
      <Row>
        <Col span={6}>
          <Input placeholder='请输入搜索关键字' ref={keywordEle}  ></Input>
        </Col>
        <Col span={6} offset={1}>
          <Select placeholder="请选择公告类型" onChange={changeType} style={{ width: "100%" }}>
            {
              annoTypeList.map((l, i) => {
                return (
                  <Select.Option value={l.value} key={i} >
                    {l.text}
                  </Select.Option>
                )
              })
            }
          </Select>
        </Col>
        <Col span={6} offset={1}>
          <Button danger onClick={todoStartSearch} >搜索</Button>
        </Col>
      </Row>

      <Row style={{ marginTop: 20 }}>
        <Col>
          <Table
            dataSource={annoList}
            sticky
            bordered
            id="table"
            pagination={{ pageSize: 6 }}
            rowKey={(item: any) => item._id}
          >
            <Column
              title='#'
              align="center"
              render={(text, item, index) => (
                <b>{index + 1}</b>
              )}
            />

            <Column
              title='公告名称'
              align="center"
              key='title'
              dataIndex='title'
              render={(text, item, index) => (
                <b>{text}</b>
              )}
            />

            <Column
              title='发布人'
              align="center"
              key='userInfo'
              dataIndex='userInfo'
              render={(text, item, index) => (
                <b>{text?.username}</b>
              )}
            />

            <Column
              title='发表时间'
              align="center"
              key='time'
              dataIndex='time'
              render={(text, item, index) => (
                <p>{moment(text).format('YYYY-MM-DD HH:MM')}</p>
              )}
            />

            <Column
              title='公告类型'
              align="center"
              key='type'
              dataIndex='type'
              render={(text, item, index) => (
                <Tag color={annoTypeList.find((item: any) => item.value == text)?.color}>
                  {annoTypeList.find((item: any) => item.value == text)?.text}
                </Tag>
              )}
            />

           
           {
             flag&&<Column
             title='操作'
             align="center"
             render={(text, item: any, index: any) => (
               <div>
                 <Popconfirm
                   title="你真的要删除吗?"
                   onConfirm={() => confirm(item, index)}
                   okText="确定"
                   cancelText="不了"
                 >
                   <Button danger shape="circle" icon={<DeleteOutlined />} size="small"></Button>
                 </Popconfirm>
                 <Tooltip placement="top" title={'查看'}>
                   <Button style={{ margin: "0 5px" }} onClick={() => gotoAnnoDetail(item)} shape="circle" icon={<FolderViewOutlined />} size="small" />
                 </Tooltip>
                 <Tooltip placement="top" title={'编辑'} >
                   <Button type="primary" onClick={() => gotoEditAnno(item)} shape="circle" icon={<FormOutlined />} size="small" />
                 </Tooltip>
               </div>
             )}
           />
           }
          

          </Table>
        </Col>
      </Row>
    </div>
  )
}
export default observer(AnnoList)